fix(slider): support mouse & touch all the time #2327
Conversation
This fixes fomantic#1988 (mouse interaction on touch devices) but disables dragging the slider via touch input. Touch-tapping for slider positioning still works through browsers' mouse event emulation. Touch-dragging will be re-added in a modified form in a later commit.
In contrast to the old touch event handling, this code - handles touchcancel events in a sensible way - tracks Touch identifier to avoid confusion by other fingers on the touch screen - does not interfere with mouse sliding - binds only to .thumb elements to avoid accidential sliding while scrolling the page on a mobile device
auto-assign
bot
requested review from
ColinFrick,
exoego,
y0hami,
ko2in,
lubber-de and
prudho
lubber-de
added
lang/javascript
There was a problem hiding this comment.
Very well done PR so far 👍🏼
Thank you!
I only found a typo and have a question. Please see my comments.
A little additional request when done/answered:
Please provide two links for jsfiddle testing for this:
- The usual one (jsfiddle.net/abcdef../)
- a link we use for mobile testing using the following syntax
- https://fomantic-ui.com/jsfiddle/#!/{jsfiddle-code}
- For example https://fomantic-ui.com/jsfiddle/#!/sfz45v0m/3 (using your jsfiddle above)
Because I would like @jamessampford to test this on his ipad/mouse setup .
I believe you already tested it so far on your Android/bt mouse setup (?)
I have to rely/trust on your experience here, because i can only use Browserstack to emulate a wider range of mobile devices but none of those have a real mouse attached to the devices, so the only situation i can personally test is if the changes basically still work on "usual" setups.
|
@lubber-de This seems to work (both dragging and clicking) on my iPad (iPadOS 15.4.1, latest version) using:
Also works on my Android phone still but I can only try with finger It may be a good idea to test in Windows with a touchscreen in all browsers, as well as hoping that someone else has a trackpad keyboard and/or Bluetooth mouse to verify in iOS/iPadOS As this also relates to #1989 with the dropdown module, the same improvement will also need to be implemented there (and anywhere else similar) |
Co-authored-by: Marco 'Lubber' Wienkoop <c64@lubber.de>
Yes, I tested with desktop Chrome on Linux (touch + mouse), mobile Chrome on Android (touch + mouse) and mobile Firefox on Android (touch + mouse).
This is a good idea, although I'm hoping that all modern desktop browsers stick to the Touch API as it is described on MDN. Unfortunately, I don't have Windows touch device at hand.
Yes, I'm already working on this one. Another PR will follow for this, as soon as I can fix some strange behaviour in touch interaction of nested dropdown menus (which is already present in the current code). |
This should avoid unwanted interference with touch-enabled parent elements. It does not seem to have unwanted side-effects on the slider itself.
|
Here is the updated JSFiddle: |
|
@jamessampford could you please try/approve the new jsfiddle on your setup again ? Thx |
|
@lubber-de Seems to still work the same with the same 3 different ways of testing it as before (with dragging and clicking/tapping) with both the sliders |
lubber-de
changed the title
|
@all-contributors please add @mhthies for code |
|
I've put up a pull request to add @mhthies! 🎉 |
lubber-de
removed
the
state/awaiting-reviews
This PR fixes #1989 in a similar way as my previous PR for the slider (#2327): First, I removed all special event handling for touch events and the whole distiction between touch- and non-touch devices, so mouse events will be handled on touch devices as well. Then, I added only a few touch event bindings for the things that don't work via mouse event emulation of the mobile web browsers. In addition, I fixed two minor bugs with nested submenus being not correctly hidden in some cases (see commit messages for more details). I tested everything on Chrome mobile on Android (with touch and Bluetooth mouse) Firefox mobile on Android (with touch and Bluetooth mouse) Chromium on Linux/X11 (with multitouch screen and mouse) Firefox on Linux/X11 (with multitouch screen and mouse)
Description
As proposed in #1988, I did a rework of the touch event handling of the slider component. The new touch event code
.thumbelement to avoid accidential sliding while scrolling the page on a mobile device (obsoletes [slider] Add option to disable touch-/mouse-sliding on the track #1987)The last point can be considered a disadvantage/regression compared to the old code, if you consider touch-sliding anywhere on the slider as a feature. However, in my experience, it's really annoying to change a slider position (which has immediate real-world effects in my home automation software) when scrolling the page and accidentially hitting a slider. Using the mouse, one can still slide the slider anywhere on its track.
Testcase
https://jsfiddle.net/jyg4wtcq/
https://fomantic-ui.com/jsfiddle/#!/jyg4wtcq (for mobile devices)
Screenshot (if possible)
--
Closes